<template>
<div class="title">
  <div class="img">
    <img src="../../assets/images/title_1.png">
    <img src="../../assets/images/title_2.png">
  </div>
  <div class="letter" @click="backHome">
    四环交通管理系统
  </div>
  <!--<div class="info">-->
  <!--  <div class="weather">-->
  <!--    <div class="weather-item">-->
  <!--      当前城市：{{weather.city}}市-->
  <!--    </div>-->
  <!--    <div class="weather-item">-->
  <!--      天气：{{weather.wea}}-->
  <!--    </div>-->
  <!--    <div class="weather-item">-->
  <!--      当前气温：{{weather.tem}}度-->
  <!--    </div>-->
  <!--  </div>-->
  <!--  <div class="time">-->
  <!--    <div class="time-item">-->
  <!--      {{weather.date}}-->
  <!--    </div>-->
  <!--    <div class="time-item">-->
  <!--      {{currentTime}}-->
  <!--    </div>-->
  <!--  </div>-->
  <!--</div>-->
</div>
</template>

<script setup>
import axios from "axios";
import {onMounted, onUnmounted, reactive, ref} from "vue"
import {useRoute, useRouter} from "vue-router";
const router = useRouter()
let currentTime = ref()
let timer

onMounted(()=>{
  getWeather()
  timer = setInterval(()=>{
    getTime()
  },1000)
})

onUnmounted(()=>{
  clearInterval(timer)
})
const backHome = ()=>{
  router.push('/')
}

//weather对象
let weather = reactive({
  date:'',
  time:'',
  city:'',
  wea:'',
  tem:'',
})

const getTime = ()=>{
  const timestamp = Date.now(); // 获取当前时间的时间戳（毫秒）

  const date = new Date(timestamp); // 创建一个 Date 对象

  const hours = date.getHours(); // 获取小时
  const minutes = date.getMinutes(); // 获取分钟
  const seconds = date.getSeconds(); // 获取秒

  // 如果你想要添加前导零以保持两位数格式
  const formattedTime = `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;

  currentTime.value = formattedTime
  // console.log(formattedTime); // 输出格式化后的时间，例如：'15:30:45'
}

//获取天气
const getWeather = ()=>{
  axios.get('https://v0.yiketianqi.com/free/day',{
    params: {
      unescape: "1",
      appid: '21874569',
      appsecret: 'xcmyK7ms ',
      city:'沈阳'
    }
  }).then(res=>{
    const data = res.data
    weather.date = data.date
    weather.time = data.time
    weather.city = data.city
    weather.wea = data.wea
    weather.tem = data.tem

  }).catch((err)=>{
    console.log('请求出错',err)
  })
}

</script>

<style scoped lang="less">
.title{
  width: 100vw;
  .img{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 90%;
    margin: 2vh auto;
    img{
      width: 33%;
    }
  }
  .letter{
    cursor: pointer;
    color: #fff;
    font-size: 4vh;
    position: absolute;
    top: 1.5vh;
    left: 37.5%;
    text-align: center;
    width: 25%;
    margin: auto;
  }
  .info{
    color: rgba(255,255,255,.8);
    display: flex;
    justify-content: space-between;
    .weather{
      display: flex;
      margin-left: 1.5vw;
      .weather-item{
        margin-right: 2vw;
      }
    }
    .time{
      margin-right: 2vw;
      display: flex;
      .time-item{
        margin-left: 2vw;
      }
    }
  }
}
</style>